<template>
  <view class="mask" @click="dimiss">
    <!-- 阻止子元素事件向父元素冒泡 -->
    <view class="popup-body" @click.stop="!dimiss">
      <image style="width: 100%;height: 55%;" src="/static/myCenter/likeNum.png" mode=""></image>
      <text style="font-size: 16px;color: #545454;">"{{username}}"共获得{{likeNum}}个赞</text>
      <view class="display-default" style="width: 100%;">
        <button class="display-default button-confrim" @click="confrim">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        likeNum: 0,
      }
    },
    onLoad(e) {
      this.username = e.username
      this.likeNum = e.likeNum
    },
    methods: {
      //点击mask消失，由于是页面实际相当于返回
      dimiss() {
        console.log("点击mask消失");
        uni.navigateBack()
      },
      // 对话框，确定按钮
      confrim() {
        // 返回上一页面
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }

  .mask {
    position: relative;
    width: 100%;
    height: 100%;

    .popup-body {
      background: white;
      // border-radius: 30rpx;
      width: 600rpx;
      height: 40%;
      position: absolute;
      // 中间居中
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      // padding-bottom: 20rpx;
      // 内部元素竖向布局，并上下等边居中
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;

      & .button-confrim {
        background: #fff;
        color: #000;
        border-top: 1px solid #f5f5f5;
        font-size: 15px;
        padding: 10rpx 0;
        width: 100%;
      }
    }
  }
</style>
